<template>
	<view class="detail">
		<headers :HTitle='text'></headers>
		<view class="detail_scroll" :style="{height:screenHeight+'px'}">
			<scroll-view scroll-y="true" class="scroll1">
				<!-- 商品图片 -->
				<view class="">
					<view class="detail_img">
						<image :src="flowerDtail.cover_img" mode=""></image>
					</view>
					<view class="detail_info">
						<view class="" style="font-size: 38rpx;">
							<text>{{flowerDtail.title||'暂无'}}</text>
						</view>
						<view class="" style="font-size: 28rpx; color: #8e8e8e; margin: 20rpx 0;">
							<!-- <text style="margin-right: 40rpx;">成交数:1423</text> -->
							<text>库存:{{flowerDtail.stock}}扎</text>
						</view>
						<view class="">
							<text
								style="color: #FF0000;font-size: 40rpx;font-weight: bold;">￥{{flowerDtail.amount}}/扎</text>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view>
					<tab-info :maturity="flowerDtail.maturity" :flaw="flowerDtail.flaw"></tab-info>
				</view>
				<!-- 全部商品 -->
				<all-img :product="allProduct"></all-img>
				<!-- <all-img></all-img> -->
			</scroll-view>
		</view>
		<!-- 商品导航 -->
		<view class="">
			<navigation-market ref="market" @handleToOrder="handleToOrder" @addCart="addCart"></navigation-market>
		</view>
	</view>
</template>
<!--  -->
<script>
	import indexSwiper from '../../components/indexcpns/indexSwiper.vue'
	import navigationMarket from '../../components/navigation-market/navigation-market.vue'
	import tabInfo from '../../components/table_info/table_info.vue'
	import allImg from '../../components/allImg/allImg.vue'
	import headers from "../../components/lerojon-header_nav/header_nav.vue"
	import badgeMix from "../../mixin/tabbar-badge.js";
	import {mapState} from 'vuex'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				text: "详情页",
				flowerDtail: {},
				currentId: 1,
				screenHeight: "",
				allProduct:[]
			}
		},
		components: {
			indexSwiper,
			navigationMarket,
			tabInfo,
			allImg,
			headers,
		},
		computed:{
			...mapState('m_cart',['flowerSortId'])
		},
		onBackPress(event) {
		    uni.switchTab({
		     url: '../cate/cate'
		    })
		    return true;
		   },
		onLoad(res) {
			this.currentId = res.id
			this.getDetail()
			this.getscreenHeight()
			this.getAllgoods()
		},
		methods: {
			
			handleToOrder() {
				this.$store.commit('m_cart/updataPickGoods1', this.flowerDtail)
				uni.navigateTo({
					url: '../order/order'
				})
				console.log(this.flowerDtail)
			},
			addToCart() {
				uni.$http.post('/product-server/api/cart/v1/add', {
					"buy_num": 1,
					"product_id": this.currentId
				}).then(res => {
					if (res.data.code === 200) {
						uni.$showMsg('加入成功', 1500, 'success')
						this.getallgoods()
					} else if (res.data.msg === '商品库存不足') {
						uni.$showMsg('商品库存不足')
					}
				})
			},
			addCart() {
				this.addToCart()
			},
			getallgoods() {
				uni.$http.get('/product-server/api/cart/v1/mycart').then(res => {
					if (res.data.code === 200) {
						res.data.data.cart_items.forEach(item => {
							item.isChecked = false
						})
						this.$store.commit('m_cart/add', res.data.data)

						// uni.stopPullDownRefresh();
					} else {
						let cart = {
							cart_items: []
						}
						this.$store.commit('m_cart/add', cart)
					}

				})
			},

			// 获取当前商品
			getDetail() {
				uni.$http.get(`/product-server/api/product/v1/detail/${this.currentId}`).then(res => {
					this.flowerDtail = res.data.data
					this.text = res.data.data.flowerSort
					console.log(this.flowerDtail)
				})
			},
			getscreenHeight() {
				let res = uni.getSystemInfoSync()
				this.screenHeight = res.screenHeight - res.statusBarHeight - 100
			},
			getAllgoods() {
				uni.$http.get(`/product-server/api/product/v1/sortid/${this.flowerSortId}`).then(res => {
						this.allProduct=JSON.parse(JSON.stringify(res.data.data))
				})
			}

		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.detail {
		width: 100vw;
		/* height: 100vh; */

	}

	.detail_scroll {
		position: fixed;
		top: calc(var(--status-bar-height) + 100rpx);
		left: 0;
		right: 0;
		bottom: 100rpx;
		overflow: auto;
		/* margin-top: calc(var(--status-bar-height) + 100rpx); */
		/* height: calc(100vh - var(--status-bar-height) - 100rpx); */
		background-color: #007AFF;
	}

	.scroll1 {
		height: 100%;
		/* height: calc(100vh - var(--status-bar-height) - 80rpx); */
	}



	.detail_img {
		width: 100%;
		height: 600rpx;
	}

	.detail_img image {
		width: 100%;
		height: 600rpx;
		background-color: #07C160;
	}

	.detail_info {
		background-color: #FFFFFF;
		padding: 30rpx;
	}
</style>
